<template>
    <div class="mine">
        <header>
            <h2>{{ t('home.Mine.personal') }}</h2>
            <div class="info">
                <div class="left">
                    <img src="../../../assets/mine/logo.png" alt="">
                </div>
                <div class="right">
                    <div class="item">
                        <span class="key">{{ `${t('home.Mine.userId')}:` }}</span>
                        <span class="value">{{ userInfo.id }}</span>
                    </div>
                    <div class="item item2">
                        <span class="key">{{ `${t('home.Mine.username')}:` }}</span>
                        <span class="value">{{ userInfo.userName }}</span>
                    </div>
                </div>
            </div>
            <div class="balance">
                <div class="item">
                    <span class="key">{{ `${t('home.Mine.balance')}:` }}</span>
                    <span class="value">{{ userInfo.amt }}</span>
                </div>
                <div class="item item2">
                    <span class="key">{{ `${t('home.Mine.trust')}:` }}</span>
                    <span class="value">{{ userInfo.creditScore }}</span>
                </div>
            </div>
        </header>
        <main>
            <ul>
                <li @click="routerGo('pocket')">
                    <div class="img">
                        <img src="../../../assets/mine/pocket.png" alt="">
                    </div>
                    <div class="name">
                        <span>{{ t('home.Mine.pocket') }}</span>
                    </div>
                    <div class="icon">
                        <van-icon name="arrow" />
                    </div>
                </li>
                <li @click="routerGo('loan')">
                    <div class="img">
                        <img src="../../../assets/mine/history.png" alt="">
                    </div>
                    <div class="name">
                        <span>{{ t('home.Mine.loan') }}</span>
                    </div>
                    <div class="icon">
                        <van-icon name="arrow" />
                    </div>
                </li>
                <li @click="routerGo('charge')">
                    <div class="img">
                        <img src="../../../assets/mine/deposit.png" alt="">
                    </div>
                    <div class="name">
                        <span>{{ t('home.Mine.deposit') }}</span>
                    </div>
                    <div class="icon">
                        <van-icon name="arrow" />
                    </div>
                </li>
                <li @click="routerGo('withdraw')">
                    <div class="img">
                        <img src="../../../assets/mine/withdraw.png" alt="">
                    </div>
                    <div class="name">
                        <span>{{ t('home.Mine.withdraw') }}</span>
                    </div>
                    <div class="icon">
                        <van-icon name="arrow" />
                    </div>
                </li>
                <li @click="routerGo('history')">
                    <div class="img">
                        <img src="../../../assets/mine/history.png" alt="">
                    </div>
                    <div class="name">
                        <span>{{ t('home.Mine.history') }}</span>
                    </div>
                    <div class="icon">
                        <van-icon name="arrow" />
                    </div>
                </li>
                <li @click="routerGo('authentication')">
                    <div class="img">
                        <img src="../../../assets/mine/authentication.png" alt="">
                    </div>
                    <div class="name">
                        <span>{{ t('home.Mine.authentication') }}</span>
                    </div>
                    <div class="icon">
                        <van-icon name="arrow" />
                    </div>
                </li>
                <li @click="routerGo('help')">
                    <div class="img">
                        <img src="../../../assets/mine/help.png" alt="">
                    </div>
                    <div class="name">
                        <span>{{ t('home.Mine.help') }}</span>
                    </div>
                    <div class="icon">
                        <van-icon name="arrow" />
                    </div>
                </li>
                <li @click="routerGo('customer')">
                    <div class="img">
                        <img src="../../../assets/mine/customer.png" alt="">
                    </div>
                    <div class="name">
                        <span>{{ t('home.Mine.customer') }}</span>
                    </div>
                    <div class="icon">
                        <van-icon name="arrow" />
                    </div>
                </li>
                <li @click="routerGo('card')">
                    <div class="img">
                        <img src="../../../assets/mine/card.png" alt="">
                    </div>
                    <div class="name">
                        <span>{{ t('home.Mine.card') }}</span>
                    </div>
                    <div class="icon">
                        <van-icon name="arrow" />
                    </div>
                </li>
                <li @click="logou()">
                    <div class="img">
                        <img src="../../../assets/mine/exit.png" alt="">
                    </div>
                    <div class="name">
                        <span>{{ t('home.Mine.exit') }}</span>
                    </div>
                    <div class="icon">
                        <van-icon name="arrow" />
                    </div>
                </li>
            </ul>
        </main>
    </div>
</template>

<script setup>
import useLanguage from '@/hooks/useLanguage';
import { userApi, loansApi } from '@/api'
import { useRouter } from 'vue-router'
import { onMounted, reactive, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { UserStore } from '@/store/user';
import { showNotify } from 'vant';
import { removeToken } from '@/modules/auth';

const { t } = useLanguage()
const router = useRouter()

const userStore = UserStore()
const { userInfo } = storeToRefs(userStore)

function routerGo(path) {
    if (path == 'authentication') {
        if (userInfo.value.certification != -1) {
            // 提示
            let message = t('home.Mine.authing')
            let type = 'primary'
            switch (userInfo.value.certification) {
                case 0:
                    message = t('home.Mine.authing')
                    break;
                case 1:
                    type = 'success'
                    message = t('home.Mine.authed')
                    break;

                default:
                    message = t('home.Mine.authing')
                    break;
            }
            showNotify({ type, message })
            return
        }
    }
    if (path == 'loan') {
        getLoan(path)
        return
    }
    router.push({ name: path })
}


// 查看额度
const loanStatus = ref(-1)
async function getLoan(path) {
    const { code, data, msg, success } = await loansApi.getLoan()
    if (code == 20000 && success) {
        if (data != null) {
            console.log(data);
            if (data.status == 0) {
                // 待审核
                loanStatus.value = 0
                router.push({ name: 'waitLoanIng' }) // 调到待审核等待页面
            } else if (data.status == 1) {
                // 审核通过
                loanStatus.value = 1
                router.push({ name: 'myLoan' }) // 调到我的贷款页面
            } else {
                // 审核未通过
                loanStatus.value = -1
                showNotify({
                    type: 'danger',
                    duration: 2000,
                    message: t('waitLoan.failed'),
                    onClose: () => {
                        router.push({ name: 'waitLoan' }) // 调到-待申请-申请界面
                    }
                })
            }
        } else {
            // 未申请 去申请 调到-待申请-申请界面
            router.push({ name: 'waitLoan' })

        }
        // console.log({ code, data, msg, success });
    } else {
        console.log('游客');
        return
    }
}

async function logou() {
    const { code, data } = await userApi.logout()
    if (code == 20000) {
        removeToken()
        router.push({ name: 'login' })
    }
}
onMounted(() => {

})
</script>

<style lang="less" scoped>
.mine {
    header {
        display: flex;
        flex-direction: column;

        h2 {
            font-size: 20px;
            font-weight: 400;
            text-align: center;
        }

        .info {
            display: flex;
            justify-content: center;
            align-items: center;

            .right {
                margin-left: 8px;
                font-size: 13px;

                .item2 {
                    margin-top: 5px;
                    font-weight: 600;
                }
            }

            .left {
                margin-right: 8px;
            }

        }

        .balance {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 10px;

            .item {
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 13px;
            }

            .item2 {
                margin-left: 20px;
            }
        }
    }

    main {
        padding-top: 40px;

        ul {
            li {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 50px;
                line-height: 40px;
                font-size: 13px;
                color: #666;
                // border-bottom: 1px solid #eee;

                .img {
                    padding-left: 20px;

                    img {
                        vertical-align: middle;
                        width: 30px;
                    }
                }

                .name {
                    width: 100%;
                    font-size: 16px;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    padding-left: 20px;
                }

                .icon {
                    padding-right: 30px;
                }
            }
        }
    }
}
</style>